<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贵州公路建设项目进度计划横道图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #2c80c5;
            padding-bottom: 15px;
        }

        h1 {
            color: #2c80c5;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .project-info {
            font-size: 16px;
            color: #666;
            margin-bottom: 5px;
        }

        .controls {
            margin-bottom: 20px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        button {
            padding: 8px 16px;
            background-color: #2c80c5;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #1e5f9e;
        }

        .gantt-container {
            overflow-x: auto;
            margin-top: 20px;
        }

        .gantt-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

        .gantt-table th,
        .gantt-table td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: center;
        }

        .gantt-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .gantt-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .gantt-table tr:hover {
            background-color: #f1f7fd;
        }

        .editable {
            cursor: pointer;
            position: relative;
        }

        .editable:hover {
            background-color: #e6f3ff;
        }

        .timeline {
            display: flex;
            margin-top: 30px;
            position: relative;
            height: 40px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .year {
            display: flex;
            flex: 1;
            position: relative;
        }

        .year-2025 {
            background-color: #e1f5fe;
        }

        .year-2026 {
            background-color: #e8f5e9;
        }

        .year-2027 {
            background-color: #fff3e0;
        }

        .month {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-right: 1px solid #ddd;
            height: 100%;
        }

        .month:last-child {
            border-right: none;
        }

        .gantt-bars {
            margin-top: 20px;
        }

        .gantt-bar {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }

        .bar-label {
            width: 150px;
            padding-right: 10px;
            text-align: right;
            font-size: 14px;
        }

        .bar-container {
            flex: 1;
            height: 10px;
            background: #f0f0f0;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }

        .bar {
            height: 100%;
            border-radius: 4px;
            position: absolute;
        }

        .bar-1 {
            background-color: #2196F3;
        }

        .bar-2 {
            background-color: #FF9800;
        }

        .bar-3 {
            background-color: #9C27B0;
        }

        .bar-4 {
            background-color: #F44336;
        }

        .bar-5 {
            background-color: #607D8B;
        }

        .bar-6 {
            background-color: #795548;
        }

        .bar-7 {
            background-color: #009688;
        }

        .bar-8 {
            background-color: #CDDC39;
        }

        .bar-9 {
            background-color: #FF5722;
        }

        .bar-10 {
            background-color: #673AB7;
        }

        .bar-11 {
            background-color: #00BCD4;
        }

        .bar-12 {
            background-color: #8BC34A;
        }

        .bar-13 {
            background-color: #E91E63;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            justify-content: center;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin: 5px 15px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .bar-label {
                width: 120px;
                font-size: 12px;
            }

            .month {
                font-size: 10px;
            }

            .controls {
                flex-direction: column;
            }
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }

        .close {
            font-size: 24px;
            cursor: pointer;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>贵州公路建设项目</h1>
            <div class="project-info">S204三都县坝街至扬拱公路改造工程（K18+000-K28+437.466）</div>
            <div class="project-info">施工单位：北京市市政一建设工程有限责任公司 监理单位：贵州省交通建设咨询监理有限公司</div>
        </header>

        <div class="controls">
            <button id="editDataBtn">编辑数据</button>
            <button id="resetDataBtn">重置数据</button>
        </div>

        <div class="gantt-container">
            <table class="gantt-table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>工程名称</th>
                        <th>计划开始时间</th>
                        <th>计划结束时间</th>
                        <th>计划工期(d)</th>
                    </tr>
                </thead>
                <tbody id="projectData">
                    <!-- 数据将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>

        <div class="timeline">
            <div class="year year-2025">
                <div class="month">7月</div>
                <div class="month">8月</div>
                <div class="month">9月</div>
                <div class="month">10月</div>
                <div class="month">11月</div>
                <div class="month">12月</div>
            </div>
            <div class="year year-2026">
                <div class="month">1月</div>
                <div class="month">2月</div>
                <div class="month">3月</div>
                <div class="month">4月</div>
                <div class="month">5月</div>
                <div class="month">6月</div>
                <div class="month">7月</div>
                <div class="month">8月</div>
                <div class="month">9月</div>
                <div class="month">10月</div>
                <div class="month">11月</div>
                <div class="month">12月</div>
            </div>
            <div class="year year-2027">
                <div class="month">1月</div>
                <div class="month">2月</div>
                <div class="month">3月</div>
                <div class="month">4月</div>
                <div class="month">5月</div>
                <div class="month">6月</div>
            </div>
        </div>

        <div class="gantt-bars" id="ganttBars">
            <!-- 横道图将通过JavaScript动态生成 -->
        </div>

        <div class="legend" id="legend">
            <!-- 图例将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 编辑数据模态框 -->
    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">编辑项目数据</div>
                <div class="close" id="closeModal">&times;</div>
            </div>
            <form id="editForm">
                <div class="form-group">
                    <label for="projectName">工程名称</label>
                    <input type="text" id="projectName" required>
                </div>
                <div class="form-group">
                    <label for="startDate">计划开始时间</label>
                    <input type="date" id="startDate" required>
                </div>
                <div class="form-group">
                    <label for="endDate">计划结束时间</label>
                    <input type="date" id="endDate" required>
                </div>
                <div class="form-group">
                    <label for="duration">计划工期(d)</label>
                    <input type="number" id="duration" min="1" required>
                </div>
                <input type="hidden" id="editIndex">
                <button type="submit">保存</button>
            </form>
        </div>
    </div>

    <script>
        // 项目数据
        let projectData = [
            { id: 1, name: "驻地建设", startDate: "2025-07-15", endDate: "2025-08-13", duration: 30 },
            { id: 2, name: "施工便道", startDate: "2025-08-08", endDate: "2025-08-27", duration: 20 },
            { id: 3, name: "预制场", startDate: "2025-10-05", endDate: "2025-11-03", duration: 30 },
            { id: 4, name: "路基土石方工程", startDate: "2025-07-20", endDate: "2026-06-24", duration: 340 },
            { id: 5, name: "防护支挡工程", startDate: "2025-07-25", endDate: "2026-07-09", duration: 350 },
            { id: 6, name: "排水工程", startDate: "2025-07-25", endDate: "2026-07-04", duration: 345 },
            { id: 7, name: "涵洞工程", startDate: "2025-10-15", endDate: "2026-07-11", duration: 270 },
            { id: 8, name: "混凝土路肩加固", startDate: "2025-10-15", endDate: "2026-07-06", duration: 265 },
            { id: 9, name: "级配碎石底基层", startDate: "2026-07-15", endDate: "2026-08-11", duration: 28 },
            { id: 10, name: "水泥稳定碎石基层", startDate: "2026-08-20", endDate: "2026-09-18", duration: 30 },
            { id: 11, name: "沥青面层", startDate: "2026-09-28", endDate: "2026-10-27", duration: 30 },
            { id: 12, name: "交安工程", startDate: "2026-11-05", endDate: "2026-12-04", duration: 30 },
            { id: 13, name: "绿化工程", startDate: "2027-03-05", endDate: "2027-03-24", duration: 20 }
        ];

        // DOM元素
        const projectDataTable = document.getElementById('projectData');
        const ganttBars = document.getElementById('ganttBars');
        const legend = document.getElementById('legend');
        const editModal = document.getElementById('editModal');
        const editForm = document.getElementById('editForm');
        const closeModal = document.getElementById('closeModal');
        const editDataBtn = document.getElementById('editDataBtn');
        const resetDataBtn = document.getElementById('resetDataBtn');

        // 初始化页面
        function initPage() {
            renderTable();
            renderGanttBars();
            renderLegend();
        }

        // 渲染表格
        function renderTable() {
            projectDataTable.innerHTML = '';
            projectData.forEach((project, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${project.id}</td>
                    <td class="editable" data-index="${index}" data-field="name">${project.name}</td>
                    <td class="editable" data-index="${index}" data-field="startDate">${project.startDate}</td>
                    <td class="editable" data-index="${index}" data-field="endDate">${project.endDate}</td>
                    <td class="editable" data-index="${index}" data-field="duration">${project.duration}</td>
                `;
                projectDataTable.appendChild(row);
            });

            // 添加点击事件
            document.querySelectorAll('.editable').forEach(cell => {
                cell.addEventListener('click', function () {
                    const index = this.getAttribute('data-index');
                    const field = this.getAttribute('data-field');
                    openEditModal(index, field);
                });
            });
        }

        // 渲染横道图
        function renderGanttBars() {
            ganttBars.innerHTML = '';

            // 计算时间轴的总天数
            const startDate = new Date('2025-07-01');
            const endDate = new Date('2027-06-30');
            const totalDays = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;

            projectData.forEach((project, index) => {
                const taskStart = new Date(project.startDate);
                const taskEnd = new Date(project.endDate);

                // 计算任务开始相对于时间轴起点的天数
                const daysFromStart = Math.ceil((taskStart - startDate) / (1000 * 60 * 60 * 24));
                const taskDuration = Math.ceil((taskEnd - taskStart) / (1000 * 60 * 60 * 24)) + 1;

                // 计算任务在时间轴上的位置和宽度百分比
                const left = (daysFromStart / totalDays) * 100;
                const width = (taskDuration / totalDays) * 100;

                // 创建横道
                const ganttBar = document.createElement('div');
                ganttBar.className = 'gantt-bar';
                ganttBar.innerHTML = `
                    <div class="bar-label">${project.name}</div>
                    <div class="bar-container">
                        <div class="bar bar-${project.id}" style="left: ${left}%; width: ${width}%"></div>
                    </div>
                `;
                ganttBars.appendChild(ganttBar);
            });
        }

        // 渲染图例
        function renderLegend() {
            legend.innerHTML = '';
            projectData.forEach(project => {
                const legendItem = document.createElement('div');
                legendItem.className = 'legend-item';
                legendItem.innerHTML = `
                    <div class="legend-color bar-${project.id}"></div>
                    <span>${project.name}</span>
                `;
                legend.appendChild(legendItem);
            });
        }

        // 打开编辑模态框
        function openEditModal(index, field) {
            const project = projectData[index];
            document.getElementById('editIndex').value = index;
            document.getElementById('projectName').value = project.name;
            document.getElementById('startDate').value = project.startDate;
            document.getElementById('endDate').value = project.endDate;
            document.getElementById('duration').value = project.duration;
            editModal.style.display = 'flex';
        }

        // 关闭模态框
        function closeEditModal() {
            editModal.style.display = 'none';
        }

        // 保存编辑的数据
        function saveEditData(e) {
            e.preventDefault();
            const index = document.getElementById('editIndex').value;
            const name = document.getElementById('projectName').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            const duration = parseInt(document.getElementById('duration').value);

            // 更新数据
            projectData[index].name = name;
            projectData[index].startDate = startDate;
            projectData[index].endDate = endDate;
            projectData[index].duration = duration;

            // 重新渲染页面
            initPage();
            closeEditModal();
        }

        // 重置数据
        function resetData() {
            if (confirm('确定要重置所有数据吗？')) {
                projectData = [
                    { id: 1, name: "驻地建设", startDate: "2025-07-15", endDate: "2025-08-13", duration: 30 },
                    { id: 2, name: "施工便道", startDate: "2025-08-08", endDate: "2025-08-27", duration: 20 },
                    { id: 3, name: "预制场", startDate: "2025-10-05", endDate: "2025-11-03", duration: 30 },
                    { id: 4, name: "路基土石方工程", startDate: "2025-07-20", endDate: "2026-06-24", duration: 340 },
                    { id: 5, name: "防护支挡工程", startDate: "2025-07-25", endDate: "2026-07-09", duration: 350 },
                    { id: 6, name: "排水工程", startDate: "2025-07-25", endDate: "2026-07-04", duration: 345 },
                    { id: 7, name: "涵洞工程", startDate: "2025-10-15", endDate: "2026-07-11", duration: 270 },
                    { id: 8, name: "混凝土路肩加固", startDate: "2025-10-15", endDate: "2026-07-06", duration: 265 },
                    { id: 9, name: "级配碎石底基层", startDate: "2026-07-15", endDate: "2026-08-11", duration: 28 },
                    { id: 10, name: "水泥稳定碎石基层", startDate: "2026-08-20", endDate: "2026-09-18", duration: 30 },
                    { id: 11, name: "沥青面层", startDate: "2026-09-28", endDate: "2026-10-27", duration: 30 },
                    { id: 12, name: "交安工程", startDate: "2026-11-05", endDate: "2026-12-04", duration: 30 },
                    { id: 13, name: "绿化工程", startDate: "2027-03-05", endDate: "2027-03-24", duration: 20 }
                ];
                initPage();
            }
        }

        // 事件监听
        editForm.addEventListener('submit', saveEditData);
        closeModal.addEventListener('click', closeEditModal);
        editDataBtn.addEventListener('click', function () {
            openEditModal(0, 'name');
        });
        resetDataBtn.addEventListener('click', resetData);

        // 点击模态框外部关闭
        window.addEventListener('click', function (e) {
            if (e.target === editModal) {
                closeEditModal();
            }
        });

        // 初始化页面
        initPage();
    </script>
</body>

</html>